/*

            This file is part of the mojomo modular front end design framework for mojoPortal CMS; 
            find more at mojomo.co.uk or mojomo.codeplex.com	

Name:       demo.css

Author:     freshangle.co.uk

Version:    1.0

Purpose:    This sheet is an example edit of 'appearance/backgrounds.css'
    
            Turn this on by setting the html tag with a class of 'demo' in the layout.master:
    
            <html class="demo no-js etc etc." lang="en"> 
    
            (remember to add this within the conditional comments if your using IE...)
    
            Now you can see where the divs and wrapppers in the layout.master are and watch them as 
            you resize the browser to follow the way the responsive css works.
    
            It also shows how easy it is to 'color in the cells' for your completed design... 
            or use it to track what the cells are doing if your editing the base layouts.
    
            Choose your own colors and have fun!
    
            http://www.w3schools.com/cssref/css_colornames.asp
    
*/	


/* ------------------------------------  demo ------------------------------------ */




/*  body colors... */  

        .demo #page {background-color: RosyBrown  } 
        .demo .ie6 body, .demo .ie7 body, .demo .ie8 body {background-color:  RosyBrown  }  

/* wrapper background colors... */   

 

        .demo #topbarwrapper{background-color:  DarkSalmon   } 
        .demo #topbar{background-color:  BurlyWood    }     
        .demo #headerwrapper {background-color:   LightPink  }        
        .demo #navwrapper {background-color:  IndianRed}        
    
        .demo #topcontentwrapper {background-color:  Plum  }  
          
        .demo #maincontentwrapper {background-color: Lavender  }    
  

        .demo #subcontent {background-color:  PeachPuff }
        .demo #footerwrapper {background-color:  Peru } 
               
    
        
/*  header background colors... */    

        .demo #header {background-color:  MistyRose }

        
/* nav colors... */        
        
        .demo #primarynav {background-color:  Orange }
        .demo #secondarynav {background-color:  OrangeRed }

		.demo #breadcrumbs {background-color: Crimson  }
        

/* content column colors...  */

        
        .demo #maincontent {background-color: AliceBlue   }   

        .demo .colmid  {background-color: Blue; /*border: 3px solid DeepPink*/ }  /* Main content wrapper*/
        .demo  .col1 {background-color: LightSkyBlue  }  /* Main content LightSkyBlue */
                                                
        .demo .colleft {background-color: Green; /*border: 3px solid SpringGreen*/ }  /* Left content wrapper*/
        .demo  .col2 {background-color: Lime } /* Left content Lime */
        
        .demo .colmask {background-color: DarkOliveGreen; /*border: 3px solid Yellow*/  }  /* Right content wrapper*/
        .demo  .col3 {background-color: Teal } /* Right content Teal*/ 
		
	
/* alt panel colors... */        
        
        .demo #topcontent {background-color:  LawnGreen } 
        .demo #subcontent div {background-color:  LimeGreen } 
               
/* footer colors... */                  
        
        .demo #footer {background-color:  Tan    }
        .demo #mainfooter {background-color:  PaleTurquoise }
        .demo #subfooter {background-color:  PaleGreen }
        


/* mojo admin pages masking column colors...   */

        .demo .administration .col1, .demo .htmledit .col1, .demo .passwordrecovery .col1, .demo .registerpage .col1, .demo .userprofile .col1,
        .demo .loginpage .col1, .demo .memberlist .col1 {background: OldLace ;}   
        
        
/* module colors...   */      
        
     
		.demo .g1, .demo .g2, .demo .g3 {background-color: PaleVioletRed }	
        .demo .g1 h3, .demo .g2 h3, .demo .g3 h3  { color: White }
        
        
   